(function (window) {
	'use strict';

	// Your starting point. Enjoy the ride!

	const valNam = "value"
	const tools = {
		get() {
			return JSON.parse(localStorage.getItem(valNam)) || []
		},
		set(data) {
			localStorage.setItem(valNam, JSON.stringify(data))
		}
	}
	const vm = new Vue({
		el: "#app",
		data: {
			todos: tools.get(),
			newTodo: "",
			type: "all",
			editingCode: null,
			title: ""
		},
		computed: {
			count() {
				return this.todos.filter(data => data.completed === false)
			},
			isAll: {
				get() {
					return this.count.length === 0
				},
				set(value) {
					this.todos.map(data => data.completed = value)
				}
			},
			countT() {
				return this.todos.filter(data => data.completed)

			},
			isShow() {
				if (this.type === "all") {
					return this.todos
				} else if (this.type === "active") {
					return this.count
				} else if (this.type === "completed") {
					return this.countT
				}
			}
		},
		methods: {
			isS() {
				return this.count.length === 1 ? "" : "s"
			},
			add() {
				this.todos.push({
					id: Date.parse(new Date()),
					title: this.newTodo,
					completed: false
				})
				this.newTodo = ""
			},
			removeTodo(data) {
				const num = this.todos.indexOf(data)
				this.todos.splice(num, 1)
			},
			removeCompleted() {
				this.countT.map(data => {
					this.removeTodo(data)
				})
			},
			getEditing(data) {
				this.editingCode = data
				this.title = data.title
			},
			cancel(data) {
				this.editingCode = null
				data.title = this.title
			},
			enterT(data) {
				if (!this.editingCode) return
				if (!data.title) {
					this.removeTodo(data)
				} else {
					data.title = data.title.trim()
				}
				this.editingCode = null
			},
		},
		directives: {
			"focus":
				function (el, bind) {
					if (bind.value) {
						el.focus()
					}
				}
		},
		watch: {
			todos: {
				deep: true,
				handler: tools.set
			}
		}
	})

})(window);
